<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 父元素系统处理子元素事件 -->
     <!-- 由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，
      由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation) -->
      <ul id="list">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <p>哈哈哈</p>
      </ul>

      <script>
        var list = document.getElementById("list");
        // list.onclick = function(){
        //     console.log("点击了");
            
        // }  //DOM0级事件


        //DOM2级事件
        list.addEventListener("click",function(e){
            if(event.target.tagName ==="LI"){
                // console.log("点击了LI标签");
                console.log(event.target.innerHTML);
                
                
            }
        })


      </script>
</body>
</html>